// 监控区域
(function() {
    // 功能1: 点击标题, 颜色变成白色, 另一个标题
    $(".monitor .tabs").on("click", "a", function() {
        // siblings("a")是获取该元素的a标签的兄弟节点
        $(this).addClass("active").siblings("a").removeClass("active");

        // 功能2: 点击标题, 与之对应的列表会显示, 另一个列表隐藏
        $(".monitor .content").eq($(this).index()).show().siblings(".content").hide();
    });

    // 功能3: 无缝滚动
    $(".marquee-view .marquee").each(function() {
        // 获取当前的marquee
        let rows = $(this).children().clone();
        // 将rows添加到当前marquee的后面
        $(this).append(rows);
    });

})();

// 点位区域
(function() {
    let myEchart = echarts.init(document.querySelector(".pie"));
    const option = {
        // 提示框组件
        tooltip: {
            // trigger 触发方式。非轴图形, 使用item的意思是放到数据对应图形上触发提示
            trigger: 'item',
            // 格式化提示内容：
            // a 代表series系列图表名称  
            // b 代表series数据名称 data 里面的name    
            // c 代表series数据值 data 里面的value   
            // d代表  当前数据/总数据的比例
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        // 控制图表
        series: [{
            // 图表名称
            name: 'Area Mode',
            // 图表类型
            type: 'pie',
            // 饼状图的颜色
            color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
            // 南丁格尔玫瑰图, 有两个圆, 内圆半径10%,外圆半径70%
            // 饼形图半径: 可以是px, 也可以是百分比(基于DOM容器大小), 第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
            // 如果是百分比, 要用双引号.
            // radius: [20, 140],
            radius: ["10%", "70%"],
            // 图表中心位置 left 50%  top 50%  距离图表DOM容器
            center: ['50%', '50%'],
            // radius 半径模式，另外一种是 area 面积模式
            roseType: 'radius',
            // 数据集 value 数据的值 name 数据的名称
            data: [
                { value: 20, name: '云南' },
                { value: 26, name: '北京' },
                { value: 24, name: '山东' },
                { value: 25, name: '河北' },
                { value: 20, name: '江苏' },
                { value: 25, name: '浙江' },
                { value: 30, name: '四川' },
                { value: 42, name: '湖北' }
            ],
            // 图表文字调整
            label: {
                // 不加px单位.
                fontSize: 10
            },
            // 引导线调整
            labelLine: {
                // 连接扇形图线长
                length: 6,
                // 连接文字线长
                length2: 8
            }
        }]
    };
    myEchart.setOption(option);

    // 让图表根据浏览器的大小自适应
    window.addEventListener("resize", function() {
        // 图表自适应
        myEchart.resize();
    });
})();
// 用户区域
(function() {
    // 单个柱子的配置对象
    let item = {
        name: '',
        value: 1200,
        // 柱子颜色
        itemStyle: {
            color: '#254065'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#254065'
            }
        },
        // 工具提示隐藏
        tooltip: {
            extraCssText: 'opacity:0'
        },
    }

    let myEchart = echarts.init(document.querySelector(".bar"));
    let option = {
        // 修改线性渐变色方式 1
        color: new echarts.graphic.LinearGradient(
            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
            0, 0, 0, 1, [
                { offset: 0, color: '#00fffb' }, // 0 起始颜色
                { offset: 1, color: '#0061ce' } // 1 结束颜色
            ]
        ),
        // tooltip: 提示框组件.
        // 作用: 鼠标放到图表的数据项时, 会有提示框显示.
        tooltip: {
            //trigger: 触发类型.
            // 作用: 当鼠标移动到图表的数据项时, 以何种方式来显示提示框.
            // 属性值1: item: 鼠标移动到数据的那一列的数据上, 才有效果.
            // 属性值2: axis: 鼠标移动到数据的那一列, 就有效果.
            // 属性值3: none: 什么都不触发.
            trigger: 'item'
        },
        // 饼形图修改图表大小是通过series对象里面的radius.
        // 柱形图修改图标大小是通过series对象里面的grid对象中的left、right.
        grid: {
            left: '0%',
            right: '3%',
            top: '3%',
            bottom: '3%',
            // show: 是否显示网格.
            show: true,
            //grid 四条边框的颜色
            borderColor: 'rgba(0, 240, 255, 0.3)',
            // containLabel: 当图表的left设置为0%时, 左侧的刻度会超出div盒子范围导致图表显示不全;
            // 若属性值设置为true, 可以自动的显示左侧的刻度线和数据值, 使得图表刚好适应div盒子的大小.
            containLabel: true
        },
        // 控制x轴
        xAxis: [{
            // 使用类目，必须有data属性
            type: 'category',
            // 使用 data 中的数据设为刻度文字
            data: ['上海', '广州', '北京', '深圳', '合肥', '', '......', '', '杭州', '厦门', '济南', '成都', '重庆'],
            // 刻度设置
            axisTick: {
                // true意思：图形和刻度在一列
                // false意思：图形在刻度之间
                alignWithLabel: false,
                // 不显示刻度
                show: false
            },
            // x坐标轴文字标签样式设置
            axisLabel: {
                color: '#4c9bfd'
            },
            // x坐标轴颜色设置
            axisLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            }
        }],
        yAxis: [{
            type: 'value',
            // 刻度设置
            axisTick: {
                // 不显示刻度
                show: false
            },
            // y坐标轴文字标签样式设置
            axisLabel: {
                color: '#4c9bfd'
            },
            // y轴分割线的样式 
            splitLine: {
                lineStyle: {
                    color: 'rgba(0, 240, 255, 0.3)'
                }
            }
        }],
        series: [{
            name: 'Direct',
            type: 'bar',
            barWidth: '60%',
            data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
        }]
    };
    myEchart.setOption(option);

    // 让图表根据浏览器的大小自适应
    window.addEventListener("resize", function() {
        // 图表自适应
        myEchart.resize();
    });
})();
// 销售统计模块
(function() {
    var data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    }

    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".line"));
    // 2. 指定配置和数据
    var option = {
        tooltip: {
            trigger: "axis"
        },
        legend: {
            // data: ["邮件营销", "联盟广告"], 如果series里面写了name属性, 那么这里的data可以省略.
            textStyle: {
                color: '#4c9bfd' // 图例文字颜色
            },
            right: '10%' // 距离右边10%
        },
        color: ['#00f2f1', '#ed3f35'], // 表格中线条的颜色
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '3%',
            show: true, // 显示边框
            borderColor: '#012f4a', // 边框颜色
            containLabel: true // 包含刻度文字在内
        },
        xAxis: {
            type: "category",
            axisTick: {
                show: false // 去除x轴的刻度线
            },
            axisLabel: {
                color: '#4c9bfd' // x轴文本颜色
            },
            axisLine: {
                show: false // 去除x轴的轴线
            },
            boundaryGap: false, // 去除轴内间距; 如果改为true, 那么第一列数据则不是从y轴开始.
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
        },
        yAxis: {
            type: "value",
            axisTick: {
                show: false // 去除刻度
            },
            axisLabel: {
                color: '#4c9bfd' // 文字颜色
            },
            splitLine: {
                lineStyle: {
                    color: '#012f4a' // 分割线颜色
                }
            }
        },
        series: [{
                name: "预期销售额",
                type: "line",
                stack: "总量",
                data: data.year[0],
                smooth: true, // 折线修饰为圆滑, 也就是改成曲线
            },
            {
                name: "实际销售额",
                type: "line",
                stack: "总量",
                data: data.year[1],
                smooth: true, // 折线修饰为圆滑, 也就是改成曲线
            }
        ]
    };

    // 3. 把配置和数据给实例对象
    myChart.setOption(option);

    // 添加点击样式
    $(".sales .caption").on("click", "a", function() {
        // 点击哪一个a, 把哪一个a的下标赋值到当前
        // 因为index()会获取所有同一级的标签, 获取的是0 1 2 3 4
        // 实际index的a只有4个, 下标为: 0 1 2 3, 其实整个同一级标签获取的1才是index的0, 所以要减1.
        index = $(this).index() - 1;

        // 点击的添加class, 其他的移除class
        $(this).addClass("active").siblings("a").removeClass("active");

        // 获取data对象中某个属性的方式
        // console.log(data.year); // 方式1
        // console.log(data["year"]); // 方式2

        // console.log(this.dataset.type); // 获取H5自定义属性的值
        // console.log(data[this.dataset.type]); // 根据自定义属性的值获取data对象中的数据

        // 根据点击的按钮来获取对应的数据
        let arr = data[this.dataset.type];
        // 替换series中的data数据
        option.series[0].data = arr[0];
        option.series[1].data = arr[1];
        // 重新渲染配置和数据给实例对象
        myChart.setOption(option);
    });

    // 开启定时器, 自动轮播
    let as = $(".sales .caption a"); // 获取所有的a
    // console.log(as); // 0 1 2 3
    let index = 0; // 控制轮播的下标
    let timer = setInterval(function() {
        index++; // 每隔一秒index+1
        // 如果下标大于4, 那么需要从新开始
        if (index >= 4) index = 0;
        as.eq(index).click(); // 获取下一个a, 并点击
    }, 1000);

    // 当鼠标移动到图表时, 停止定时器, 移开时, 开启定时器
    // 参数1: 当鼠标移进来的时候
    // 参数2: 当鼠标移出去的时候
    $(".sales").hover(function() {
        // 当鼠标移进来, 停止定时器
        clearInterval(timer);
    }, function() {
        // 当鼠标移出去, 清空之前的定时器, 开启一个新的定时器.
        clearInterval(timer);
        timer = setInterval(function() {
            index++; // 每隔一秒index+1
            // 如果下标大于4, 那么需要从新开始
            if (index >= 4) index = 0;
            as.eq(index).click(); // 获取下一个a, 并点击
        }, 1000);
    });

    // 让图表根据浏览器的大小自适应
    window.addEventListener("resize", function() {
        // 图表自适应
        myChart.resize();
    });
})();
// 雷达区域
(function() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".radar"));
    // 2.指定配置
    var option = {
        backgroundColor: "#161627",
        tooltip: {
            show: true,
            // 控制提示框组件的显示位置
            position: ['60%', '10%']
        },
        radar: {
            indicator: [
                { name: '机场', max: 100 },
                { name: '商场', max: 100 },
                { name: '火车站', max: 100 },
                { name: '汽车站', max: 100 },
                { name: '地铁', max: 100 }
            ],
            center: ['50%', '50%'],
            radius: '65%', // 外半径占据容器大小
            shape: "circle",
            splitNumber: 4, // 指示器轴的分割段数
            name: {
                // 修饰雷达图文本颜色
                textStyle: {
                    color: "#4c9bfd"
                }
            },
            splitLine: {
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)', // 雷达图中的分隔线颜色（圆圈）
                }
            },
            splitArea: {
                show: false
            },
            axisLine: {
                // show: true,
                lineStyle: {
                    color: 'rgba(255, 255, 255, 0.5)' // 坐标轴轴线相关设置(竖线)axisLine
                }
            }
        },
        series: [{
            name: "北京",
            type: "radar",
            lineStyle: {
                normal: {
                    width: 1,
                    opacity: 0.5
                }
            },
            data: [
                [90, 19, 56, 11, 34]
            ],
            // symbol 标记的样式(拐点），还可以取值'rect' 方块 ,'arrow' 三角等
            symbol: 'circle',
            // 拐点的大小  
            symbolSize: 5,
            // 小圆点（拐点）设置为白色
            itemStyle: {
                color: '#fff'
            },
            // 在圆点上显示相关数据
            label: {
                show: true,
                color: '#fff',
                fontSize: 10
            },

            // 线条样式
            lineStyle: {
                normal: {
                    color: '#fff'
                }
            },
            // 区域填充的背景颜色
            areaStyle: {
                color: 'rgba(238, 197, 102, 0.6)'
            }
        }]
    };
    // 3.把配置和数据给对象
    myChart.setOption(option);

    // 让图表根据浏览器的大小自适应
    window.addEventListener("resize", function() {
        // 图表自适应
        myChart.resize();
    });
})();
// 销售模块 饼形图 半圆形 设置方式
(function() {
    // 1. 实例化对象
    var myChart = echarts.init(document.querySelector(".gauge"));
    // 2. 指定数据和配置
    var option = {
        series: [{
            type: "pie",
            // 鼠标经过不变大
            hoverOffset: 0,
            // 放大图形
            radius: ['130%', '150%'],
            // 连接文字的刻度线
            labelLine: {
                normal: {
                    show: false
                }
            },
            // 移动下位置  套住50%文字
            center: ['48%', '80%'],
            // 起始角度，支持范围[0, 360]
            startAngle: 180,
            data: [{
                    value: 100,
                    itemStyle: {
                        // 颜色渐变#00c9e0->#005fc1
                        color: new echarts.graphic.LinearGradient(
                            // (x1,y2) 点到点 (x2,y2) 之间进行渐变
                            0,
                            0,
                            0,
                            1, [
                                { offset: 0, color: "#00c9e0" }, // 0 起始颜色
                                { offset: 1, color: "#005fc1" } // 1 结束颜色
                            ]
                        )
                    }
                },
                {
                    value: 100,
                    itemStyle: { color: '#12274d' }

                },
                {
                    value: 200,
                    // 透明隐藏第三块区域
                    itemStyle: { color: 'transparent' }
                }
            ]
        }]
    };
    // 3. 把数据和配置给实例对象
    myChart.setOption(option);

    // 让图表根据浏览器的大小自适应
    window.addEventListener("resize", function() {
        // 图表自适应
        myChart.resize();
    });
})();
// 全国热榜区域
(function() {
    // 准备数据
    var hotData = [{
            city: '北京', // 城市
            sales: '25, 179', // 销售额
            flag: true, //  上升还是下降
            brands: [ //  品牌种类数据
                { name: '可爱多', num: '9,086', flag: true },
                { name: '娃哈哈', num: '8,341', flag: true },
                { name: '喜之郎', num: '7,407', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '6,724', flag: false },
                { name: '好多鱼', num: '2,170', flag: true },
            ]
        },
        {
            city: '河北',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '3,457', flag: false },
                { name: '娃哈哈', num: '2,124', flag: true },
                { name: '喜之郎', num: '8,907', flag: false },
                { name: '八喜', num: '6,080', flag: true },
                { name: '小洋人', num: '1,724', flag: false },
                { name: '好多鱼', num: '1,170', flag: false },
            ]
        },
        {
            city: '上海',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '2,345', flag: true },
                { name: '娃哈哈', num: '7,109', flag: true },
                { name: '喜之郎', num: '3,701', flag: false },
                { name: '八喜', num: '6,080', flag: false },
                { name: '小洋人', num: '2,724', flag: false },
                { name: '好多鱼', num: '2,998', flag: true },
            ]
        },
        {
            city: '江苏',
            sales: '23,252',
            flag: false,
            brands: [
                { name: '可爱多', num: '2,156', flag: false },
                { name: '娃哈哈', num: '2,456', flag: true },
                { name: '喜之郎', num: '9,737', flag: true },
                { name: '八喜', num: '2,080', flag: true },
                { name: '小洋人', num: '8,724', flag: true },
                { name: '好多鱼', num: '1,770', flag: false },
            ]
        },
        {
            city: '山东',
            sales: '20,760',
            flag: true,
            brands: [
                { name: '可爱多', num: '9,567', flag: true },
                { name: '娃哈哈', num: '2,345', flag: false },
                { name: '喜之郎', num: '9,037', flag: false },
                { name: '八喜', num: '1,080', flag: true },
                { name: '小洋人', num: '4,724', flag: false },
                { name: '好多鱼', num: '9,999', flag: true },
            ]
        }
    ]
    let index = 0; // 控制定时器想要显示的li的下标
    let supHTML = "";
    // 遍历数据
    $.each(hotData, function(index, item) {
        supHTML += `<li><span>${item.city}</span><span>${item.sales}<s class=${item.flag ? "icon-up" : "icon-down"}></s></span></li> `
    });
    // 将拼接好的模板字符串添加到ul中
    $(".sup").html(supHTML);

    // 为每一个li添加鼠标经过事件, 因为li是后来添加的, 所以要使用代理.
    $(".province .sup").on("mouseover", "li", function() {
        // 当鼠标经过当前的li时, 对应的下标要改变
        index = $(this).index();
        // 渲染对应区域的数据
        render($(this));
    })

    // 默认选择第一个li
    // 获取所有的li
    let lis = $(".province .sup li");
    // 获取第一个li, 并添加鼠标经过事件
    lis.eq(0).mouseenter();

    // 设置定时器
    let timer = setInterval(function() {
        index++;
        if (index >= 5) index = 0;
        render(lis.eq(index));
    }, 2000)

    // 当鼠标移动到列表时, 停止定时器
    // lis.hover(function() {
    $(".province .sup").hover(
        function() {
            // 停止定时器
            clearInterval(timer);
        },
        function() {
            // 当鼠标移开时
            clearInterval(timer);
            timer = setInterval(function() {
                index++;
                if (index >= 5) index = 0;
                render(lis.eq(index));
            }, 2000)
        }
    );

    // 当鼠标移动到左边的目录时, 右边的区域显示对应的数据.
    // 这是一个渲染函数.
    // that是一个形参, 表示当前要操作的元素.
    function render(that) {
        // 为当前的li添加active类, 移除其他所有li的类
        that.addClass("active").siblings().removeClass();

        // 当鼠标移动到li时, 对应的数据还要显示出来
        // console.log($(this).index()); // 获取当前鼠标经过的li的索引
        // console.log(hotData[$(this).index()]); // 索引在hotData中对应的对象
        // console.log(hotData[$(this).index()].brands); // 获取对象中的brands

        // 渲染数据sub
        let subHTML = "";
        $.each(hotData[that.index()].brands, function(index, item) {
            subHTML += `<li><span>${item.name}</span><span>${item.num}<s class=${item.flat ? "icon-up" : "icon-down"}></s></span></li>`;
        });
        // 将subHTML渲染到页面
        $(".sub").html(subHTML);
    }
})();